<template>
  <div class="personnel-item" @click="onClick">
    <t-radio-group
      v-model="model._checked_"
      :options="[{ label: '', value: true }]"
    ></t-radio-group>

    <div class="flex-1 flex no-wrap">
      <UserAvatar
        :image-url="model.Avatar"
        class="cursor-pointer ml-2"
        :classList="['rounded']"
        width="48px"
        height="48px"
        :circle="false"
        style="padding-top: 6px"
      />
      <div
        class="flex-1 ml-4 flex flex-col overflow-hidden pb-4 text-sm teld-color-gray"
        style="border-bottom: 1px solid #e9e9e9"
      >
        <span class="flex row items-center">
          <!-- 固定展示：姓名 -->
          <HighlightSearchResult
            :source="model.RealName"
            :keyword="keyword"
            class="text-lg teld-color-black"
          ></HighlightSearchResult>
          <span class="ml-2" style="line-height: 0">
            <!-- 注：性别字段接口是返回的中文！ -->
            <gender-male v-if="model.Gender === '男'" class="w-4 h-4" />
            <gender-female v-else-if="model.Gender === '女'" class="w-4 h-4" />
          </span>
        </span>

        <!-- 固定展示：职位 -->
        <HighlightSearchResult
          :prefix-label="qLangComment.jobPosition + ': '"
          :source="`${model.DutyID}`"
          :keyword="keyword"
          class="teld-color-gray"
        ></HighlightSearchResult>
        <!-- 固定展示：部门信息 -->
        <HighlightSearchResult
          :prefix-label="qLangComment.department + ': '"
          :source="combinedDepartmentInfo(model)"
          :keyword="keyword"
          class=""
        ></HighlightSearchResult>
        <!-- 非固定展示字段：邮箱 -->
        <HighlightSearchResult
          v-if="matchField === SG_USER_LIST_QUERY_FIELDS.EMAIL"
          :prefix-label="qLangComment.email + ': '"
          :source="`${model.Email}`"
          :keyword="keyword"
          class=""
        ></HighlightSearchResult>
        <!-- 非固定展示字段：账户 -->
        <HighlightSearchResult
          v-if="matchField === SG_USER_LIST_QUERY_FIELDS.ACCOUNT"
          :prefix-label="qLangComment.account + ': '"
          :source="`${model.Account}`"
          :keyword="keyword"
          class=""
        ></HighlightSearchResult>
        <!-- 非固定展示字段：手机号 -->
        <HighlightSearchResult
          v-if="matchField === SG_USER_LIST_QUERY_FIELDS.MOBILE"
          :prefix-label="qLangComment.mobile + ': '"
          :source="`${model.Mobile}`"
          :keyword="keyword"
          class=""
        ></HighlightSearchResult>
      </div>
    </div>
  </div>
</template>

<script setup>
// Components
import UserAvatar from '../../components/user-avatar/index.vue';
import HighlightSearchResult from '../../components/HighlightSearchResult/index.vue';
import GenderFemale from '../../components/svg-icons/gender-female.vue';
import GenderMale from '../../components/svg-icons/gender-male.vue';

// Utils
import { computed, inject } from 'vue';
import { SG_USER_LIST_QUERY_FIELDS } from '../../utils';

const qLangComment = inject('qLangComment');
const props = defineProps({
  dataItem: {
    type: Object,
    default: () => ({}),
  },
  keyword: {
    type: String,
    default: null,
  },
  matchField: {
    type: String,
    default: null,
  },
});
const emit = defineEmits(['update:dataItem']);
const model = computed({
  get() {
    return props.dataItem;
  },
  set(v) {
    emit('update:dataItem', v);
  },
});

/**
 * @summary User姓名下的附加信息
 * - DutyID 就是职位，这接口字段也太不讲究了
 * - 公司部门信息：[CompanyName, DepartmentName, WorkgroupName]
 * @param {Object} item
 */
const combinedDepartmentInfo = item => {
  const { CompanyName, DepartmentName, WorkgroupName } = item;
  return [CompanyName, DepartmentName, WorkgroupName]
    .filter(n => !!n)
    .join('-');
};

const onClick = () => {
  model.value = {...props.dataItem, _checked_: !props.dataItem._checked_ };
};
</script>
